<template>
    <el-card>
        <el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" show-icon :closable="false"></el-alert>
        <div class="casc-box">
            <label>选择商品分类：</label>
            <el-cascader style="width:300px" clearable
                :options="cateList"
                :props="{ label:'cat_name',value:'cat_id' }"
                @change="resetParams"
            ></el-cascader>
        </div>
        <el-tabs>
            <el-tab-pane label="动态参数">
                <div class="search-bar" style="margin-bottom:16px">
                    <el-button type="primary" size="mini" :disabled="btnDisable"
                        @click="newParamsModel=true"
                    >添加新参数</el-button>
                </div>
                <el-table border :data="manyParams" size="small">
                    <el-table-column label="明细" width="60px" type="expand">
                        <template #default="{ row }">
                            <div class="attrs-box">
                                <template v-if="row.attr_vals.length!=0">
                                    <el-tag v-for="(attr,i) in row.attr_vals.split(',')" :key="i"
                                        closable @close="handleRemoveConfirm(row,attr)"
                                    >{{ attr }}</el-tag>
                                </template>
                                <el-input class="input-new-tag" size="small" :ref=" 'attr'+row.attr_id "
                                    v-model="attrSetValue[row.attr_id]"
                                    @keyup.enter.native="handleInputConfirm(row)"
                                    @blur="handleInputConfirm(row)"
                                    v-if="attrSetFlag[row.attr_id]"
                                ></el-input>
                                <el-button class="button-new-tag" size="small"
                                    v-else @click="showTagInput(row.attr_id)"
                                >+ 新参数值</el-button>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="序号" type="index" width="60px"></el-table-column>
                    <el-table-column label="参数名称" prop="attr_name"></el-table-column>
                    <el-table-column label="操作">
                        <template #default="{ row }">
                            <el-button type="primary" size="mini" icon="el-icon-edit"
                                @click="openUpateParamModel(row)"
                            >编辑</el-button>
                            <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="静态属性">
                <div class="search-bar" style="margin-bottom:16px">
                    <el-button type="primary" size="mini" :disabled="btnDisable"
                        @click="newAttrModel=true"
                    >添加新属性</el-button>
                </div>
                <el-table border :data="onlyParams" size="small">
                    <el-table-column label="明细" width="60px" type="expand">
                        <template #default="{ row }">
                            <div class="attrs-box">
                                <template v-if="row.attr_vals.length!=0">
                                    <el-tag v-for="(attr,i) in row.attr_vals.split(',')" :key="i"
                                        closable @close="handleRemoveConfirm(row,attr)"
                                    >{{ attr }}</el-tag>
                                </template>
                                <el-input class="input-new-tag" size="small" :ref=" 'attr'+row.attr_id "
                                    v-model="attrSetValue[row.attr_id]"
                                    @keyup.enter.native="handleInputConfirm(row)"
                                    @blur="handleInputConfirm(row)"
                                    v-if="attrSetFlag[row.attr_id]"
                                ></el-input>
                                <el-button class="button-new-tag" size="small"
                                    v-else @click="showTagInput(row.attr_id)"
                                >+ 新参数值</el-button>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="序号" type="index" width="60px"></el-table-column>
                    <el-table-column label="参数名称" prop="attr_name"></el-table-column>
                    <el-table-column label="操作">
                        <template #default="{ row }">
                            <el-button type="primary" size="mini" icon="el-icon-edit"
                                @click="openUpateAttrModel(row)"
                            >编辑</el-button>
                            <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <!-- 添加动态参数 -->
        <el-dialog title="添加新参数" :visible.sync="newParamsModel">
            <el-form label-width="80px">
                <el-form-item label="参数名称">
                    <el-input v-model="newParams.attr_name"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="newParamsModel = false">取 消</el-button>
                <el-button type="primary" @click="addNewCateParamsOrAttr(newParams)">确 定</el-button>
            </template>
        </el-dialog>

         <!-- 更新动态参数 -->
        <el-dialog title="更新参数" :visible.sync="updateParamsModel" @close="attrId=null;updateParams.attr_name=''">
            <el-form label-width="80px">
                <el-form-item label="参数名称">
                    <el-input v-model="updateParams.attr_name"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="updateParamsModel = false">取 消</el-button>
                <el-button type="primary" @click="updateCateParamsOrAttr(updateParams)">确 定</el-button>
            </template>
        </el-dialog>

        <!-- 添加静态属性 -->
        <el-dialog title="添加新属性" :visible.sync="newAttrModel">
            <el-form label-width="80px">
                <el-form-item label="属性名称">
                    <el-input v-model="newAttr.attr_name"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="newAttrModel = false">取 消</el-button>
                <el-button type="primary" @click="addNewCateParamsOrAttr(newAttr)">确 定</el-button>
            </template>
        </el-dialog>

        <!-- 更新静态属性 -->
        <el-dialog title="更新参数" :visible.sync="updateAttrModel" @close="attrId=null;updateAttr.attr_name=''">
            <el-form label-width="80px">
                <el-form-item label="参数名称">
                    <el-input v-model="updateAttr.attr_name"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="updateAttrModel = false">取 消</el-button>
                <el-button type="primary" @click="updateCateParamsOrAttr(updateAttr)">确 定</el-button>
            </template>
        </el-dialog>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            cateList:[],
            manyParams:[],
            onlyParams:[],
            attrSetFlag:{},
            attrSetValue:{},
            btnDisable:true,
            // cateId
            cateId:null,
            attrId:null,
            // 动态参数
            newParamsModel:false,
            newParams:{
                attr_name:"",
                attr_sel:"many"
            },
            updateParamsModel:false,
            updateParams:{
                attr_name:"",
                attr_sel:"many"
            },
            // 静态属性
            newAttrModel:false,
            newAttr:{
                attr_name:"",
                attr_sel:"only"
            },
            updateAttrModel:false,
            updateAttr:{
                attr_name:"",
                attr_sel:"only"
            },
        }
    },
    methods:{
        showTagInput(attrId) {
            this.$set(this.attrSetFlag,attrId,true);
            this.$nextTick(()=>{
                this.$refs['attr'+attrId]['$refs']['input'].focus();
            })
            
        },
        async handleInputConfirm(row){
            let temp = this.attrSetValue[row.attr_id];
            this.attrSetFlag[row.attr_id] = false;    
            this.attrSetValue[row.attr_id] = "";
            if(temp=="") return;
            temp = temp.replace(/,/g,"，");
            let res = await this.$api.updateCategoriesNewParams(this.cateId,row.attr_id,{
                attr_name:row.attr_name,
                attr_sel:row.attr_sel,
                attr_vals:row.attr_vals==""?temp:row.attr_vals+","+temp
            })
            if(!res) return;
            // console.log(res);
            row.attr_vals = res.attr_vals;
        },
        async handleRemoveConfirm(row,tag){
            let newTag = row.attr_vals.split(",");
            newTag.splice(newTag.indexOf(tag),1);
            newTag = newTag.join(",");
            let res = await this.$api.updateCategoriesNewParams(this.cateId,row.attr_id,{
                attr_name:row.attr_name,
                attr_sel:row.attr_sel,
                attr_vals:newTag
            })
            if(!res) return;
            row.attr_vals = res.attr_vals;
        },
        async loadAllCateList(){
            let cate = await this.$api.loadCategoriesList();
            // console.log(cate);
            this.cateList = cate;
        },
        async resetParams(ids){
            if(ids.length!=3){
                this.btnDisable = true;
                this.manyParams = [];
                this.onlyParams = [];
                this.cateId = null;
                return;
            }
            // console.log("值发生变化:",ids);
            this.btnDisable = false;
            this.cateId = ids[2];
            let many = await this.$api.loadCategorieParams(this.cateId,"many");
            let only = await this.$api.loadCategorieParams(this.cateId,"only");
            // console.log(many,only);
            this.manyParams = many;
            this.onlyParams = only;
        },
        async addNewCateParamsOrAttr(params){
            if(this.cateId==null){
                this.$message.error("请选择商品分类")
                return;
            }
            let res = await this.$api.addCategoriesNewParams(this.cateId,params)
            if(!res) return;
            this.newAttrModel = false;
            this.newParamsModel = false;
            let many = await this.$api.loadCategorieParams(this.cateId,"many");
            let only = await this.$api.loadCategorieParams(this.cateId,"only");
            this.manyParams = many;
            this.onlyParams = only;
        },
        // 更新
        openUpateParamModel(row){
            // console.log(row);
            this.updateParamsModel = true;
            this.updateParams.attr_name = row.attr_name;
            this.attrId = row.attr_id
        },
        openUpateAttrModel(row){
            // console.log(row);
            this.updateAttrModel = true;
            this.updateAttr.attr_name = row.attr_name;
            this.attrId = row.attr_id
        },
        async updateCateParamsOrAttr(params){
            if(this.cateId==null){
                this.$message.error("请选择商品分类")
                return;
            }
            if(this.attrId==null){
                this.$message.error("请选择更新参数")
                return;
            }
            let res = await this.$api.updateCategoriesNewParams(this.cateId,this.attrId,params)
            if(!res) return;
            this.updateAttrModel = false;
            this.updateParamsModel = false;
            let many = await this.$api.loadCategorieParams(this.cateId,"many");
            let only = await this.$api.loadCategorieParams(this.cateId,"only");
            // console.log(many,only);
            this.manyParams = many;
            this.onlyParams = only;
        }
    },
    created(){
        this.loadAllCateList();
    }
}
</script>

<style lang="less" scoped>
.casc-box{
    margin: 16px 0px;
}
.attrs-box{
    margin: 16px 60px 0px 60px;
    .el-tag{
        margin: 0px 16px 16px 0px;
        vertical-align: middle;
    }
}
.button-new-tag {
    margin: 0px 16px 16px 0px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    width: 120px;
    vertical-align: middle;
}
.input-new-tag {
    width: 120px;
    margin: 0px 16px 16px 0px;
    vertical-align: bottom;
    vertical-align: middle;
}
</style>